<template>
    <div>
        <div id="map" class="map"></div>
        <div id="tooltip"></div>
    </div>
</template>
   
<script>
export default {
    name: "leafletPm",
    data() {
        return {
            map: null,
        };
    },
    mounted() {
        this.map = L.map('map', { editable: true });
        this.map.addLayer(L.layerGroup([L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
            maxZoom: 18,
            minZoom: 3,
        })]));
        this.map.setView([39.867158783823854, 116.51046324232317], 10);
        // this.initMap();
        this.huaXian();
        this.huaDuoBanXing();
    },
    methods: {
        initMap() {
            // 添加绘制工具
            this.map.pm.setLang("zh");
            this.map.pm.addControls({
                position: "topleft",
                drawPolygon: true, //绘制多边形
                drawMarker: false, //绘制标记点
                drawCircleMarker: false, //绘制圆形标记
                drawPolyline: true, //绘制线条
                drawRectangle: false, //绘制矩形
                drawCircle: false, //绘制圆圈
                editMode: true, //编辑多边形
                dragMode: true, //拖动多边形
                cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容
                removalMode: true, //清除多边形
            });

            // 全局设置绘制样式
            this.map.pm.setPathOptions({
                color: "orange",
                fillColor: "green",
                fillOpacity: 0.4,
            });

            // 或者单独设置绘制样式
            var options = {
                // 连接线标记之间的线
                templineStyle: {
                    color: "red",
                },
                // 提⽰线从最后⼀个标记到⿏标光标的线
                hintlineStyle: {
                    color: "red",
                    dashArray: [5, 5],
                },
                // 绘制完成的样式
                pathOptions: {
                    color: "orange",
                    fillColor: "green",
                },
            };

            // 激活绘制多边形功能-1、单独设置某个模式的样式
            this.map.pm.enableDraw("Polygon", options);

            // 启用绘制--多边形功能
            this.map.pm.enableDraw("Polygon", {
                snappable: true, //启⽤捕捉到其他绘制图形的顶点
                snapDistance: 20, //顶点捕捉距离
            });

            // 关闭绘制--注意也可以关闭其他模式的绘制功能
            this.map.pm.disableDraw("Polygon");

            // 绘制事件监听
            this.map.on("pm:drawstart", (e) => {
                console.log(e, "绘制开始第一个点");
            });
            this.map.on("pm:drawend", (e) => {
                console.log(e, "禁⽌绘制、绘制结束");
            });
            this.map.on("pm:create", (e) => {
                console.log(e, "绘制完成时调⽤");
                if (e.shape == "Circle") {
                    console.log(e.layer._latlng, e.layer._radius, "绘制坐标");
                } else {
                    console.log(e.layer._latlngs[0], "绘制坐标");
                }
            });

            this.map.on("pm:globalremovalmodetoggled", (e) => {
                console.log(e, "清除图层时调用");
            });
        },
        // 画线
        huaXian() {
            var polyline = L.polyline([[40.02404009136253, 116.50641060224784], [41.02404009136253, 117.50641060224784], [42.02404009136253, 118.50641060224784]]).addTo(this.map);
            polyline.enableEdit(); // 开启编辑
            // this.map.editTools.startPolyline(); // 画一条新的线
            // polyline.editor.continueForward(); // 继续现有的线
        },
        // 画圆
        huaYuan() {
            var circle = L.circle([40.02404009136253, 116.50641060224784], { radius: 200 }).addTo(this.map);
            circle.enableEdit(); // 开启编辑
            // this.map.editTools.startCircle(); // 画一条新的圆
        },
        // 画线提示 加 线条编辑时变色
        huaXianTiShi() {
            L.NewLineControl = L.Control.extend({
                options: {
                    position: 'topleft'
                },
                onAdd: function (map) {
                    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
                        link = L.DomUtil.create('a', '', container);

                    link.href = '#';
                    link.title = 'Create a new line';
                    link.innerHTML = '/\\/';
                    L.DomEvent.on(link, 'click', L.DomEvent.stop)
                        .on(link, 'click', function () {
                            map.editTools.startPolyline();
                        });

                    return container;
                }
            });
            this.map.addControl(new L.NewLineControl());

            var tooltip = L.DomUtil.get('tooltip');
            function addTooltip(e) {
                L.DomEvent.on(document, 'mousemove', moveTooltip);
                tooltip.innerHTML = 'Click on the map to start a line.';
                tooltip.style.display = 'block';
            }

            function removeTooltip(e) {
                tooltip.innerHTML = '';
                tooltip.style.display = 'none';
                L.DomEvent.off(document, 'mousemove', moveTooltip);
            }

            function moveTooltip(e) {
                tooltip.style.left = e.clientX + 20 + 'px';
                tooltip.style.top = e.clientY - 10 + 'px';
            }

            function updateTooltip(e) {
                if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
                    tooltip.innerHTML = 'Click on the map to continue line.';
                }
                else {
                    tooltip.innerHTML = 'Click on last point to finish line.';
                }
            }
            this.map.on('editable:drawing:start', addTooltip);
            this.map.on('editable:drawing:end', removeTooltip);
            this.map.on('editable:drawing:click', updateTooltip);
            this.map.on('editable:editing', function (e) {
                e.layer.setStyle({ color: 'DarkRed' });
            });
        },
        // 画多边形
        huaDuoBanXing() {
            var poly = L.polygon([
                [
                    [39.979279227545106, 116.48803382823502],
                    [39.85906128141725, 116.66105068430089],
                    [39.73470742376431, 116.52648878907823],
                    [39.84220807531746, 116.36445638620022],
                ]
            ]).addTo(this.map);
            poly.showMeasurements();
            poly.enableEdit();
            // poly.toggleEdit();
            poly.on('click', function (e) {
                if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
                    e.target.editor.newHole(e.latlng);
                }
            });
            poly.on('editable:created', (e) => {
                console.log(e);
            });
            this.map.fitBounds(poly.getBounds());
            this.map.on('editable:vertex:drag editable:vertex:deleted', poly.updateMeasurements, poly);
        },
    },
};
</script>
   
<style scoped>
.map {
    width: 100%;
    height: 400px;
}

#tooltip {
    display: none;
    position: absolute;
    background: #666;
    color: white;
    opacity: 0.5;
    padding: 10px;
    border: 1px dashed #999;
    font-family: sans-serif;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    z-index: 1000;
}
</style>
<style>
@import '~leaflet-draw/dist/leaflet.draw.css';
</style>